import React, { Component } from 'react'
import axios from 'axios'
export class Index extends Component {
    state={
        email:'',
        password:'',
        affirmpassword:'',
        phone:''
    }
    render() {
        let  {email, password, affirmpassword ,phone} = this.state
        return (
            <div className="registory">
                
                <h1>网易云音乐</h1>
                <h4>注册</h4>
                <div>
                    <input type="text" placeholder="邮箱" value={email} onChange={(e)=>this.setState({email:e.target.value})}/>
                </div>
                <div>
                    <input type="password" placeholder="6-16位密码，区分大小写" value={password} onChange={(e)=>this.setState({password:e.target.value})} />
                </div>
                <div>
                    <input type="password" placeholder="确认密码" value={affirmpassword} onChange={(e)=>this.setState({affirmpassword:e.target.value})} />
                </div>
                <div className="phone">
                    <p> + 86</p>
                    <input type="text" placeholder="11位手机号" value={phone} onChange={(e)=>this.setState({phone:e.target.value})}  />
                </div>
                <div className="bom">
                    <button onClick={()=>{this.registry()} }>注册</button>
                    <p onClick={()=>this.props.history.push('/login')}>已有账号注册</p>
                </div>
            </div>
        )
    }
    // 点击注册
    registry(){
        let  {email, password, affirmpassword ,phone} = this.state
        
        if( password !== affirmpassword){
            this.setState({
                email:'',
                password:'',
                affirmpassword:'',
                phone:''
            })
            return alert('两次密码不一样')
        }
        console.log(email, password, affirmpassword ,phone)
        axios.post('/register',{email, password ,phone}).then(res=>{
            console.log(res)
            if(res.data.code===1){
                this.props.history.push('/login')
            }else{
                alert('手机号已被注册')
            }
        })
        this.setState({
            email:'',
            password:'',
            affirmpassword:'',
            phone:''
        })
    }
    
}


export default Index
